<template>
	<div class="box" style="width: 100%;height: 100%px;float: left;margin-bottom: 10px;margin-top: 10px;">
		<div class="d1" style="margin-left: 0; width: 100%;float: left;height: 100%;background: white;border-top: 3px solid deepskyblue;">
			<!--<el-card class="box-card" style='border-top: 3px solid deepskyblue;padding: 0;width: 100%;'>-->
				<div slot="header" class="clearfix" style="margin-top: 8px;margin-left: 20px;">
					<i class="el-icon-document"></i>
					<span>待办事项&nbsp;&nbsp;<i class="el-icon-refresh" style="cursor: pointer;" @click="dbsx()"></i></span>
					<!--<router-link to="/admin/jishi">
							<el-button style="float: right; padding: 3px 0" type="text">记事详情</el-button>
						</router-link>-->
				</div>
				<!--<template style="overflow: hidden; padding: 0;">-->
					<!--<div class="wpszlt1">
						<div v-for='v in comboxlist' class="hz" style="border: 1px #CCCCCC;">
							<div class="jclt" @click="wpfxbtnclickjc(v.id)">{{v.mc}}</div>
							<el-button style="width:35px; height: 50px;" type="text" @click="componentsShow('fledit',v)" icon="el-icon-edit"></el-button>
						</div>	
						</div>-->
					<el-table :data="dbsxdataList"  style="width: 45%;text-overflow: ellipsis;float: left;">
						<el-table-column align="center" prop="ms" width="" >
						</el-table-column>
						<el-table-column align="center" prop="sj"  width="">
						</el-table-column>
						<el-table-column align="center" width="100px">
							<template scope="scope">
								<!--<router-link :to="{path:'this.sz',query: {}}">-->
								<el-button size="small" type="text" @click="lytz(scope.row.tzlx)">去完成</el-button>
								<!--</router-link>-->
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="dbsxdataList1" style="width: 45%;text-overflow: ellipsis;float: right;">
						<el-table-column align="center" prop="ms"  width="">
						</el-table-column>
						<el-table-column align="center" prop="sj"  width="">
						</el-table-column>
						<el-table-column align="center"  width="100px">
							<template scope="scope">
								<!--<router-link :to="{path:'this.sz',query: {}}">-->
								<el-button size="small" type="text" @click="lytz(scope.row.tzlx)">去完成</el-button>
								<!--</router-link>-->
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页查询区域 -->
					
				<!--</template>-->
				<!--<div style="text-align: center;float: left;width: 100%;padding-bottom: 20px;">
				<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageindex" :page-sizes="pagesizes" :page-size="pagesize" :layout="layout" :total="total" class="class-page">
				</el-pagination> 
				</div>-->
			<!--</el-card>-->

		</div>
		<div class="d1" v-if='false' style="margin-left: 0; width: 48.5%;float: right;height: 100%px;">
			<el-card class="box-card" style='border-top: 3px solid deepskyblue;'>
				<div slot="header" class="clearfix">
					<i class="el-icon-document"></i>
					<span>催缴记录 &nbsp;&nbsp;<i class="el-icon-refresh" @click="jfjl()"></i></span>
					<router-link to="/cost/payjl">
						<el-button style="float: right; padding: 3px 0" type="text">催缴详情</el-button>
					</router-link>
				</div>
				<template>
					<el-table :data="jfjldataList" stripe style="width: 100%;">
						<el-table-column align="center" prop="xsmc" label="学生名称" width="120">
							<template scope="scope">
								<div slot="reference">
									<div v-if="scope.column.property == 'xsmc'" @click="componentsShow('info',scope)">
										<img :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl" style="width:20px;vertical-align:middle; float: left;" v-if="scope.column.property == 'xsmc'">
										<span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="qfje" label="欠费金额" width="90">
							<template scope="scope">
								<div slot="reference" :style="tableCellControl(scope)">
									{{ scope.row[scope.column.property] }}
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="zhjfsj" label="最后缴费时间" width="">
						</el-table-column>
						<el-table-column fixed="right" align="center" label="操作" width="100px">
							<template scope="scope">
								<!-- <el-button size="small" type="primary" @click="cktz(1,scope)">催款通知</el-button> -->
								<el-button size="small" type="primary" :disabled="scope.row.iszf == 'Y'" @click="componentsShow('qftz',scope)">催缴通知</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页查询区域 -->
					<!--<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pageindex1" :page-sizes="pagesizes1" :page-size="pagesize1" :layout="layout" :total="total1" class="class-page">
						</el-pagination>-->
				</template>
			</el-card>
			
		</div>
		<infoComponent v-if="portComponents.info.toggle" @close="componentsHide" :params="portComponents.info.params"></infoComponent>
			<QftzComponent v-if="portComponents.qftz.toggle" @close="componentsHide" :params="portComponents.qftz.params"></QftzComponent>
	</div>
</template>
<script type="text/javascript">
	import QftzComponent from '@/view/cost/payjl/qftz'
	import qs from 'qs'
	//	import Homeysbjlist from '../../view/admin/yushebjManage/add'
	import InfoComponent from '../../view/educa/classManage/student/info'
	export default {
		components: { QftzComponent, InfoComponent },
		data() {
			return {
				jsid: '',
				vks: 'N',
				visok: 'N',
				toggle: false,
				comboxlist: [],
				jfjldataList: [], //缴费记录
				dbsxdataList: [], //记事记录
				dbsxdataList1: [], //记事记录
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: 1, //当前分页页码
				pagesizes: [4], //显示个数的选择器选项
				pagesize: 4, //每页显示条目数
				total: 0, //总条数

				layout1: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex1: 1, //当前分页页码
				pagesizes1: [4], //显示个数的选择器选项
				pagesize1: 4, //每页显示条目数
				total1: 0, //总条数
				portComponents: {
					qftz: {
						type: 'qftz',
						toggle: false,
						params: '',
						data: {}
					},
					info: {
						type: 'info',
						toggle: false,
						params: '',
						data: {}
					},
				}
			}
		},
		created() {
			this.jfjl();
			this.dbsx();
			//          this.$created(function() {
			//              this.initData(null)
			//          });
		},
		methods: {
			lytz(path) {
//				alert(path)
				this.$router.push({ path: path })
			},
			tableCellControl(scope) { //表格单元格控制CSS样式
				if(scope.column.property == "zt") {
					return {
						color: "green",
					}
				} else {
					return {
						color: "red",
					}
				}
			},
			cktz(type, scope) {
				this.axios.get(this.$store.state.api + 'order/jftz', {
					params: {
						xsid: scope.row.id
					}
				}).then(res => {
				}).catch(res => {})
			},
			wc(type, scope) {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'rw/updaterwwc', {
					params: {
						id: this.jsid,
						yhid: logininfo.id,
						xxid: logininfo.xxid
					}
				}).then(res => {
					this.dbsx();
				}).catch(res => {})
			},
			dbsx() {
				this.dbsxdataList = [];
				this.dbsxdataList1 = [];
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid,
					pageindex: this.pageindex,
					pagesize: this.pagesize
				})
				//执行
				this.axios.post(this.$store.state.api + 'lsdbsxb/list', params2)
					.then(res => {
						let data = res.data.data;
						let list = data.list;
						for(var i in list){
							if(i%2 == 0 ){
								this.dbsxdataList.push(list[i])
							}else{
								this.dbsxdataList1.push(list[i])
							}
						}
						
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			handleSizeChange(val) { //每页显示条数触发事件
				this.pagesize = val;
				this.pageindex = 1;
				this.dbsx();
			},
			handleCurrentChange(val) { //分页触发事件
				this.dbsx();
			},
			jfjl() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'order/cj', {
					params: {
						ks: 'N',
						yhid: logininfo.id,
						xxid: logininfo.xxid,
						pageindex: '1',
						pagesize: '5'
					}
				}).then(res => {
					let data = res.data.data;
					let list = data.list;
					this.total1 = data.totalPage;
					this.jfjldataList = list;
				}).catch(res => {
				})
			},
			handleSizeChange1(val) { //每页显示条数触发事件
				this.pagesize1 = val;
				this.pageindex1 = 1;
				this.jfjl();
			},
			handleCurrentChange1(val) { //分页触发事件
				this.jfjl();
			},
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {

						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;

						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id

						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;

						} else {
							return;
						}
						return;
					}
				}

			},
			componentsHide(setting) { //关闭组件
				// portComponents.qftz.toggle
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						this.jfjl();
						if(!setting.cancel) {
							this.jfjl();
						}
						return;
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.text {
		font-size: 14px;
	}
	.el-icon-refresh:hover{
		 transform:scale(1.1);
        -ms-transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
	}
	.wpszlt {
		float: left;
		font-size: 12px;
		width: 100%;
		height: 100%;
		/*border: 1px solid #CCCCCC;*/
		/*margin-right: 10px;*/
	}
	
	.jclt {
		width: 85%;
		height: 50px;
		color: #2E2F2F;
		float: left;
		text-align: center;
		line-height: 50px;
		/*border: 1px solid #CCCCCC;*/
		cursor: pointer;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	
	.box-card {
		width: 100%;
		height: 100%;
	}
	
	.nr {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		/*    line-height: 280px;*/
		margin: 0;
		text-align: center;
	}
	
	.el-carousel__item:nth-child(2n) {
		background-color: white;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: lightyellow;
	}
	
	.class-page {
		margin-top: 5px;
	}
	/*日历*/
	
	#calendar {
		width: 95%;
		margin: 0 auto;
		box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	}
	
	.month {
		width: 100%;
		background: #00B8EC;
	}
	
	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}
	
	.year-month {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	
	.year-month:hover {
		background: rgba(150, 2, 12, 0.1);
	}
	
	.choose-year {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.choose-month {
		text-align: center;
		font-size: 1.5rem;
	}
	
	.arrow {
		padding: 30px;
	}
	
	.arrow:hover {
		background: rgba(100, 2, 12, 0.1);
	}
	
	.month ul li {
		color: white;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	
	.weekdays {
		margin: 0;
		padding: 10px 0;
		background-color: #00B8EC;
		display: flex;
		flex-wrap: wrap;
		color: #FFFFFF;
		justify-content: space-around;
	}
	
	.weekdays li {
		display: inline-block;
		width: 13.6%;
		text-align: center;
	}
	
	.days {
		padding: 0;
		background: #FFFFFF;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.days li {
		list-style-type: none;
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding-bottom: 15px;
		padding-top: 15px;
		font-size: 1rem;
		color: #000;
	}
	
	.days li .active {
		padding: 6px 10px;
		border-radius: 50%;
		background: #00B8EC;
		color: #fff;
	}
	
	.days li .other-month {
		padding: 5px;
		color: gainsboro;
	}
	
	.days li:hover {
		background: #e1e1e1;
	}
	.el-card__body {
    /* padding: 20px; */
}
.el-table th {
    /* padding: 12px 0; */
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
}
</style>